<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { newsGetType } from '@/api/news.js'

//首部数据
const newsList = ref()
onMounted(async () => {
  const res = await newsGetType(1, '', 5)
  newsList.value = res.data.data.rows
})

//偏旁数据
const rightNewsData = ref()
onMounted(async () => {
  const res = await newsGetType(3, '', 12)
  rightNewsData.value = res.data.data.rows
})

//今日新闻数据
const todayNewsData = ref()
onMounted(async () => {
  const res = await newsGetType(3, '', '')
  todayNewsData.value = res.data.data.rows
})

//习言道数据
const chinanews = ref(['/src/assets/xiyandao.png'])
const chinaNewsData = ref()
onMounted(async () => {
  const res = await newsGetType(1, '习言道', '')
  chinaNewsData.value = res.data.data.rows
})

//政治数据
const politicsNewsData = ref()
onMounted(async () => {
  const res = await newsGetType(1, '政治', 13)
  politicsNewsData.value = res.data.data.rows
})

//经济数据
const economyNewsData = ref()
onMounted(async () => {
  const res = await newsGetType(1, '经济', 10)
  economyNewsData.value = res.data.data.rows
})

//热门新闻数据，暂时..
const hotNews = ref([
  { id: 1, data: '多地医院门急诊排长队，这个秋冬又是发热 07:34' },
  { id: 2, data: '中新真探：喝柠檬水会长结石吗？07:34' },
  { id: 3, data: '又一波外企高管集中访华，都谈了些什么？07:34' },
  { id: 4, data: '京津冀江苏有大雾 新疆北部内蒙古东部有雨 07:34' },
  { id: 5, data: '多地医院门急诊排长队，这个秋冬又是发热 07:34' },
  { id: 6, data: '中新真探：喝柠檬水会长结石吗？07:34' },
  { id: 7, data: '又一波外企高管集中访华，都谈了些什么？07:34' },
  { id: 8, data: '京津冀江苏有大雾 新疆北部内蒙古东部有雨 07:34' },
  { id: 9, data: '多地医院门急诊排长队，这个秋冬又是发热 07:34' },
  { id: 10, data: '中新真探：喝柠檬水会长结石吗？07:34' },
  { id: 11, data: '又一波外企高管集中访华，都谈了些什么？07:34' },
  { id: 12, data: '京津冀江苏有大雾 新疆北部内蒙古东部有雨 07:34' }
])

//跳转新闻详情
const router = useRouter()
const goDetail = (newsId) => {
  router.push({ name: 'newsDetail', params: { words: newsId } })
}
</script>

<template>
  <div class="big-box">
    <!-- 标题 -->
    <div style="margin-top: 15px">
      <div v-if="newsList">
        <a
          class="big-headline co text"
          target="_blank"
          @click="goDetail(newsList[0].newsId)"
        >
          {{ newsList[0].title }}
        </a>
      </div>
      <div v-if="chinaNewsData">
        <div class="little-headline">
          <a
            class="co text"
            target="_blank"
            v-for="news in chinaNewsData.slice(0, 4)"
            :key="news.newsId"
            @click="goDetail(news.newsId)"
          >
            {{ news.title }}
          </a>
        </div>
      </div>
    </div>
    <!-- 轮播图层内容 -->
    <div style="margin-top: 30px">
      <el-row :gutter="24" type="flex" justify="center">
        <el-col :span="16">
          <!-- 轮播图 -->
          <div style="height: 500px; max-width: 900px" v-if="newsList">
            <el-carousel height="auto" autoplay style="border-radius: 10px">
              <el-carousel-item
                v-for="news in newsList"
                :key="news.newsId"
                style="height: 500px"
              >
                <img
                  :src="news.cover"
                  :alt="`Image ${index + 1}`"
                  style="width: 100%; height: 100%; object-fit: cover"
                  @click="goDetail(news.newsId)"
                />
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
        <el-col :span="8" style="text-align: left; max-height: 500px; overflow: auto">
          <div v-if="rightNewsData">
            <!-- NewsHeadline插槽 -->
            <NewsHeadline :rightNewsData="rightNewsData.slice(0, 4)"></NewsHeadline>
            <div class="spacer"></div>
            <NewsHeadline :rightNewsData="rightNewsData.slice(4, 8)"></NewsHeadline>
            <div class="spacer"></div>
            <NewsHeadline :rightNewsData="rightNewsData.slice(8, 12)"></NewsHeadline>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 今日新闻热门层内容 -->
    <div style="margin-top: 20px">
      <el-row :gutter="24" type="flex" justify="center">
        <!-- 三图新闻 -->
        <el-col :span="16">
          <el-row :gutter="24" type="flex" justify="center" v-if="todayNewsData">
            <el-col :span="8" v-for="news in todayNewsData.slice(0, 3)" :key="news.id">
              <div class="news-item text" @click="goDetail(news.newsId)">
                <img :src="news.cover" class="news-image" />
                <a class="news-link">{{ news.title }}</a>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <!-- 今日热门新闻 -->
        <el-col :span="8">
          <div class="hot-news-container" v-if="todayNewsData">
            <ColumnLabels>今日新闻热门</ColumnLabels>
            <CircleHeadine
              v-for="news in todayNewsData.slice(4)"
              :key="news.id"
              @click="goDetail(news.newsId)"
            >
              {{ news.title }}
            </CircleHeadine>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 新闻模块层 -->
    <div style="margin-top: 40px">
      <el-row :gutter="24" type="flex" justify="center">
        <!-- 习言到 -->
        <el-col :span="8">
          <div class="container" v-if="chinaNewsData">
            <img :src="chinanews" style="height: 84px; margin: 10px" />
            <div style="margin-top: 20px">
              <img
                :src="chinaNewsData[0].cover"
                class="news-image"
                style="width: 350px; height: 200px"
              />
              <div v-for="news in chinaNewsData.slice(0, 4)" :key="news.id">
                <CircleHeadine @click="goDetail(news.newsId)">{{
                  news.title
                }}</CircleHeadine>
              </div>
            </div>
            <div style="margin-top: 30px">
              <img
                :src="chinaNewsData[4].cover"
                class="news-image"
                style="width: 350px; height: 200px"
              />
              <div v-for="news in chinaNewsData.slice(4, 8)" :key="news.id">
                <CircleHeadine>{{ news.title }}</CircleHeadine>
              </div>
            </div>
          </div>
        </el-col>
        <!-- 要闻 -->
        <el-col :span="8">
          <div v-if="politicsNewsData">
            <!-- 要闻标题 -->
            <div style="display: flex; margin-bottom: 30px">
              <div class="yaowen-text">要闻</div>
              <div class="yaowen"></div>
            </div>
            <div style="margin-bottom: 30px">
              <ColumnLabels style="margin-bottom: 20px">时政新闻</ColumnLabels>
              <CircleHeadine
                v-for="news in politicsNewsData"
                :key="news.id"
                @click="goDetail(news.newsId)"
              >
                {{ news.title }}
              </CircleHeadine>
            </div>
            <div>
              <ColumnLabels style="margin-bottom: 20px">经济新闻</ColumnLabels>
              <CircleHeadine
                v-for="news in economyNewsData"
                :key="news.id"
                @click="goDetail(news.newsId)"
              >
                {{ news.title }}
              </CircleHeadine>
            </div>
          </div>
        </el-col>
        <!-- 热榜新闻 -->
        <el-col :span="8">
          <div>
            <div style="margin-bottom: 40px">
              <ColumnLabels style="margin-bottom: 35px">热榜新闻</ColumnLabels>
              <HotNewsHeadline :hotNews="hotNews.slice(0, 12)"></HotNewsHeadline>
            </div>
            <div>
              <ColumnLabels style="margin-bottom: 35px">国外热榜</ColumnLabels>
              <HotNewsHeadline :hotNews="hotNews.slice(0, 9)"></HotNewsHeadline>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<style scoped>
.big-box {
  display: flex;
  flex-direction: column;
  width: 1327px;
}

.little-headline {
  margin-top: 10px;
}

.big-headline {
  font-weight: bold;
  font-size: 38px;
}

.co {
  margin: 5px;
  color: #ec3742;
}

.spacer {
  margin-top: 40px;
}

.carousel-item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.news-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.news-image {
  border-radius: 6px;
  object-fit: cover;
  width: 276px;
  height: 155px;
}

.news-link {
  margin-top: 10px;
}

.news-text {
  margin-top: 10px;
}

.hot-news-container {
  text-align: left;
}

.text {
  background: linear-gradient(to right, #ec3742, #ec3742) no-repeat right bottom;
  background-size: 0px 2px;
  transition: background-size 0.2s;
}

.text:hover {
  background-position: left bottom;
  background-size: 100% 2px;
  color: #ec3742;
  cursor: pointer;
}

.container {
  height: auto;
  padding: 34px;
  border: 1px solid #bbbbbbbb; /* 设置容器的边框 */
  border-radius: 10px;
  text-align: center;
}
.yaowen::before {
  content: '';
  background-color: #f0f0f0;
  height: 15px;
  width: 330px;
  display: block;
  margin: 5px;
}

.yaowen-text {
  color: #bd3124;
  font-size: 24px;
  font-weight: bold;
  margin-right: 25px;
  margin-left: 10px;
}
</style>
